<template>
	<zui-watermark content="东莞宏悦酒业" :opacity="0.08" :overlay="0.5" ></zui-watermark>
	<u-sticky :zIndex="9">
		<view class="u-p-t-24 u-p-l-32 u-p-r-32 u-p-b-24" style="background-color: #FFF;">
			<up-search bgColor="#F7F7F7" placeholder="大家都在搜 五粮液" :showAction="false" shape="square" height="44"
				@search="GetCategoryList" v-model="SearchParams.keyword"></up-search>
			<view class="upt-time">价格最新更新时间: {{ UpdateTime }}</view>
		</view>
	</u-sticky>
	
	<view class=" u-p-l-32 u-p-r-32" style="height: calc(100vh - 80px);">
		<up-cate-tab class="cate-tab" :tabList="CategoryList" tabKeyName="name" itemKeyName="name">
			<template #pageItem="{pageItem}">
				<view class="w-full">
					<up-cell-group :border='false'>
						<up-cell :border='false'>
							<template #icon>
								<view :style="{
									background: `url(${pageItem.img}) center center / cover no-repeat`,
									height: '60px',
									width: '60px',
									backgroundSize: 'contain'
								}"></view>
							</template>
							<template v-slot:title>
								<view class="u-m-l-12">
									<view class="name">{{pageItem.name}}</view>
									<view class="u-m-t-12 u-flex u-flex-items-center"
										style="color: #ff1023;font-size: 11px;">
										<view style="font-size: 11px;">当前价 </view>
										<view style="margin-left: 4px;">¥</view>
										<view style="font-size: 18px;font-weight: 500;">{{ pageItem.newsPrice }}</view>
										<view class="fd-tag"
											:style="{
											 background: pageItem.priceDifference >= 0 ? '#ff1023' : '#25c343',
											 opacity: pageItem.priceDifference === 0 ? '0.2': '1'
										 }">
											{{ pageItem.priceDifference > 0 ? '+' : '' }}{{ pageItem.priceDifference }}
										</view>
									</view>
									<view class="u-m-t-8" style="font-size: 11px;color: #aaa;"
										@click="ToInfo(pageItem)">
										<text class="iconfont" style="font-size: 11px;color: #aaa;">&#xebb3;</text>
										<text class="u-m-l-4">涨跌记录</text>
									</view>
								</view>
							</template>
						</up-cell>
					</up-cell-group>
				</view>
			</template>
		</up-cate-tab>
	</view>

	<up-popup v-model:show="show" :safeAreaInsetBottom="false" :round="12" mode="center">
		<view class="pop-area">
			<view class="f-s-16 f-w-800 text-center">温馨提示</view>
			<view class="u-p-t-48">
				<up-parse :content="TipText" selectable></up-parse>
				<!-- <rich-text :nodes="TipText"></rich-text> -->
				<!-- <view class="f-s-12 u-m-b-20">电话联系小二</view>
				<up-text call align="center" bold mode="phone" text="13925714052"></up-text>

				<view class="f-s-12 u-p-t-48 u-m-b-20">采买/咨询联系微信</view>
				<view class="u-flex u-flex-items-center">
					<up-text call align="center" bold text="D58668 / kerrie2021"></up-text>
				</view> -->
			</view>
			<view>
				<up-button :custom-style="{
					width: '140px',
					height: '38px',
					borderRadius: '4px',
					color: '#FFFFFF',
					background: '#165dff',
					fontSize: '13px',
					marginTop: '28px'
				}" @click="Know">
					<text class="f-w-b">知道了</text>
				</up-button>
			</view>
			<view class="u-m-t-32">
				<up-checkbox size="14px" activeColor="#165dff" labelSize="12px" label="今日不再弹出" name="agree" usedAlone
					v-model:checked="checked">
				</up-checkbox>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		toRefs
	} from 'vue';
	import GoodsApi from '@/Api/Goods.js'
	import ConfigApi from '@/Api/Config.js'
	import {
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs';
	const show = ref(false)
	const checked = ref(false)
	// const comparePrice = computed((newPrice,oldPrice) => {
	// 	return {
	// 		price: newPrice - oldPrice,
	// 		trend: newPrice - oldPrice > 0 ? '↑' : '↓',
	// 		color: newPrice - oldPrice > 0 ? '#ff1023' : '#25c343'
	// 	}
	// })
	const data = reactive({
		CategoryList: [],
		SearchParams: {
			keyword: ''
		},
		UpdateTime: '',
		TipText: ''
	})

	const {
		CategoryList,
		SearchParams,
		UpdateTime,
		TipText
	} = toRefs(data)


	const GetCategoryList = () => {
		GoodsApi.Category(SearchParams.value).then(resp => {
			CategoryList.value = resp.data
		})
	}

	onShow(() => {
		ConfigApi.IndexShow().then(resp => {
			if (resp.data == 0) {
				return
			}
			const showPup = uni.getStorageSync(dayjs().format("YYYY-MM-DD"))
			if (showPup == 1) {
				show.value = false
				return
			}
			// 获取弹窗内容
			ConfigApi.TipText().then(resp => {
				TipText.value = resp.data
				show.value = true
			})
		})
		GoodsApi.UpdateTime().then(resp => {
			UpdateTime.value = resp.data
		})
	})
	onShareAppMessage(() => {
		return {
			title: '直约谈价，一秒咨询',
			path: '/pages/index',
		}
	})

	const Know = () => {
		if (checked.value) {
			uni.setStorageSync(dayjs().format("YYYY-MM-DD"), 1)
		}
		show.value = false
	}
	
	const ToInfo = ({ id,categoryId }) => {
		uni.navigateTo({
			url: `/pages/Info?id=${id}&categoryId=${categoryId}`
		})
	}

	GetCategoryList()
</script>

<style scoped lang="scss">
	::v-deep .u-cate-tab__item {
		width: 100px !important;
	}

	::v-deep .u-checkbox {
		justify-content: flex-end;
	}

	.upt-time {
		padding-top: 12px;
		text-align: center;
		font-size: 12px;
		color: #25c343;
	}

	.name {
		font-size: 14px;
		color: #000000;
	}

	.fd-tag {
		margin-left: 10px;
		padding: 0 6px;
		line-height: 20px;
		border-radius: 2px;
		background-color: #ff1023;
		font-weight: 500;
		color: #fff;
		font-size: 14px;
		margin-left: 12px;
	}

	.pop-area {
		width: 300px;
		background-image: url(https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2025/06/30/png/bg_20250630171125A117.png);
		background-size: contain;
		padding: 24px 24px 26px;
		box-sizing: border-box;
		border-radius: 12px;
	}

	.bottom-area {
		width: 100%;
		background-image: url(https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2025/06/30/png/bg_20250630171125A117.png);
		background-size: contain;
		padding: 24px 24px 26px;
		box-sizing: border-box;
		border-radius: 12px;
	}
</style>